<template>
	<view>
		<!-- 顶部个人信息栏 -->
		<view class="my-top">
			<view class="my-top-goju">
				<view class="my-top-setimg-box">
					<image class="my-top-setimg" src="../../static/myimg/myset.png"></image>
				</view>
				<view class="my-top-tell-box">
					<image class="my-top-tellimg" src="../../static/myimg/mytell.png"></image>
				</view>
			</view>
			<view class="my-top-messige">
				<view class="my-headimg-box">
					<image src="../../static/login/men.png" class="my-headimg"></image>
				</view>
				<view class="my-name">
					<view class="name">{{userInfo.name}}</view>
					<view class="my-edit">编辑资料</view>
				</view>
			</view>
			<view class="my-messige-content">
				<view class="my-pop">
					<view class="my-pop-number">
						3579
					</view>
					<view class="my-pop-title">获赞与收藏</view>
				</view>
				<view class="my-pop">
					<view class="my-pop-number">
						568
					</view>
					<view class="my-pop-title">粉丝</view>
				</view>
				<view class="my-pop">
					<view class="my-pop-number">
						39
					</view>
					<view class="my-pop-title">关注</view>
				</view>
			</view>
			<view class="my-top-gird">
				<view class="my-gird-first" @click="openboeder()" v-for="(item,i) in mytop">
					<view class="my-gird-first-image">
						<image :src="item.url" class="my-gird-firstimg"></image>
					</view>
					<view class="my-gird-name">{{item.name}}</view>
				</view>

			</view>
		</view>
		<!-- 个人信誉分 -->
		<view class="my-reputation">
			<view class="reputation-title">我的信誉分：{{value}}</view>
			<view class="reputation-box">
				<slider :value="value" activeColor="#1f8d60" disabled="false" backgroundColor="#a2dcc4"
					block-size="0" />
			</view>
		</view>
		<!-- 常用功能 -->
		<view class="my-ususlly-gird">
			<view class="my-ususlly-title">常用功能</view>
			<view class="my-ususlly-box" @click="openboeder()" v-for="(item,i) in myusually">
				<view class="my-ususlly-box-image">
					<image :src="item.url" class="my-ususlly-firstimg"></image>
				</view>
				<view class="my-ususlly-name">{{item.name}}</view>
			</view>
		</view>
		<!-- 底部个人打卡 -->
		<view class="my-down">
			<gb-tab class="my-down-tab" :tabBarArr="tabList" :tabIndex="tabIndex" @tabtap="taptap"
				style="position:sticky;"></gb-tab>
			<view class="mu-down-content">
				<view class="down-content-box">
					<view class="content-title">
						<view class="title-time">08/23</view>
						<view class="sample-title">用脚步丈量世界,用心灵感受生活每一次,旅行都是一次自我超越的历程.</view>
					</view>
					<view class="content-image">
						<view class="content-image-columns">
							<image class="content-img-col" src="../../static/myimg/fjshan.jpg"></image>
						</view>
						<view class="content-image-row">
							<view class="content-img-two-box">
								<image class="content-img-two" src="../../static/myimg/hgspb.jpg"></image>
							</view>
							<view class="content-img-two-box">
								<image class="content-img-two" src="../../static/myimg/hgspb.jpg"></image>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 未完善功能提示窗 -->
	<view style="width: 100%;">
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="关闭" title="消息提示">
				<text style="width: 100%; height: 120rpx;">程序员帅哥，设计师美女们正在熬根守夜加班中！！请耐心等待哦~
					<image style="width: 60%; height: 100rpx;" src="../../static/popupdatu.png"></image>
				</text></uni-popup-dialog>
		</uni-popup>
	</view>
	<button @click="logout">退出登录</button>
</template>

<script>
	export default {
		data() {
			return {
				user: [],
				value: 80, //个人信誉分值
				userInfo: [], //个人用户信息数组
				tabIndex: 0, //切换卡，暂时没用
				tabList: [{
					name: '打卡'
				}], //切换卡选项
				mytop: [{
						name: '待支付',
						url: '../../static/myimg/mypay.png'
					},
					{
						name: '待出行',
						url: '../../static/myimg/mygo.png'
					}, {
						name: '待点评',
						url: '../../static/myimg/mydianzan.png'
					},
					{
						name: '全部订单',
						url: '../../static/myimg/myall.png'
					}
				], //顶部个人信息状态功能
				myusually: [{
						name: '离线地图',
						url: '../../static/myimg/mymap.png'
					},
					{
						name: '住宿地图',
						url: '../../static/myimg/zsmap.png'
					}, {
						name: '录语音包',
						url: '../../static/myimg/yypack.png'
					},
					{
						name: '帮助反馈',
						url: '../../static/myimg/help.png'
					}
				],
				//常用功能
			};
		},
		//页面加载检测用户是否等率，登录获取用户数据
		onShow: function() {
			const userInfo = this.$LocalStorage.setLocalStorageSyncdata('userInfo')
			console.log(userInfo)
			if (userInfo) {
				for (let i in userInfo) {
					this.user.push({
						[i]: userInfo[i]
					})
				}
				console.log('用户信息:', this.user[3].user);
				this.userInfo = this.user[3].user
				// 使用用户信息
			} else {
				uni.showToast({
					title: '当前没有登录，请登录',
					icon: 'none'
				});
			}
		},
		methods: {
			//退出登录方法
			logout() {
				uni.removeStorageSync('userInfo');
				uni.navigateTo({
					url: '../login'
				});
			},
			//选项卡切换方法
			taptap(index) {
				console.log(index)
				this.tabIndex = index;
			},
			//提示框触发
			openboeder() {
				this.$refs.alertDialog.open();
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #f4f4f4;
	}

	.my-top {
		width: 100%;
		height: 530rpx;
		background-image: url('../../static/myimg/top-back.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

	}

	.my-top-goju {
		margin: 0 auto;
		width: 90%;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx;
	}

	.my-top-setimg-box {
		width: 50rpx;
		height: 40rpx;
	}

	.my-top-setimg {
		width: 100%;
		height: 100%;
	}

	.my-top-tell-box {
		width: 50rpx;
		height: 40rpx;
	}

	.my-top-tellimg {
		width: 90%;
		height: 100%;
	}

	.my-top-messige {
		margin: 0 auto;
		width: 90%;
		display: flex;
		align-items: center;
		height: 150rpx;

	}

	.my-headimg-box {
		width: 120rpx;
		height: 120rpx;
		padding: 30rpx;

		border-radius: 50%;
	}

	.my-headimg {
		width: 100%;
		height: 100%;
		border: 5rpx solid #b4fcc2;
		border-radius: 50%;
	}

	.my-name {
		width: 230rpx;
		height: 120rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.name {
		color: #f3f3f3;
		font-size: 32rpx;
		font-weight: bold;
	}

	.my-edit {
		width: 150rpx;
		height: 30rpx;
		color: #d0d0d0;
		line-height: 28rpx;
		font-size: 24rpx;
		text-align: center;
		border: 4rpx solid #d0d0d0;
		border-radius: 25rpx;
	}

	.my-messige-content {
		width: 80%;
		height: 120rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;

	}

	.my-pop {
		width: 160rpx;
		height: 80rpx;
		padding: 20rpx;
		display: flex;
		text-align: center;
		justify-content: center;
		flex-wrap: wrap;
		color: #e9e9e9;

	}

	.my-pop-number {
		width: 160rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.my-top-gird {
		width: 90%;
		height: 170rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 8px 6px rgba(156, 156, 156, 0.5);
	}

	.my-gird-first {
		width: 140rpx;
		height: 130rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.my-gird-first-image {
		width: 100rpx;
		height: 100rpx;
	}

	.my-gird-firstimg {
		width: 100%;
		height: 100%;
	}

	.my-gird-name {
		color: #7e7e7e;
	}

	.my-reputation {
		width: 90%;
		height: 150rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 8px 6px rgba(156, 156, 156, 0.5);
	}

	.reputation-title {
		width: 100%;
		padding: 0 20rpx;
	}

	.reputation-box {
		width: 100%;
		height: 70rpx;
		margin: 0;
		padding: 0;
	}

	.reputation-value {
		width: 100%;
		height: 40rpx;
	}

	uni-slider {
		padding: 0;
		margin: 0;
	}

	/deep/ .uni-slider-handle-wrapper {
		height: 30rpx;
		width: 90%;
		margin: 0 auto;
		line-height: 50rpx;
		border-radius: 15rpx;
	}

	/deep/ .uni-slider-track {
		border-radius: 15rpx;
	}

	.my-ususlly-gird {
		width: 90%;
		height: 200rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 8px 6px rgba(156, 156, 156, 0.5);
	}


	.my-ususlly-title {
		width: 100%;
		padding: 10rpx;
	}

	.my-ususlly-box {
		width: 140rpx;
		height: 130rpx;
		padding: 0 10rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.my-ususlly-box-image {
		width: 90rpx;
		height: 90rpx;
	}

	.my-ususlly-firstimg {
		width: 90%;
		height: 90%;
	}

	.my-ususlly-name {
		font-size: 28rpx;
		color: #7e7e7e;
	}

	.my-down {
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.my-down-tab {
		height: 50rpx;
		border-bottom: 3rpx solid #7e7e7e;
	}

	.mu-down-content {
		width: 100%;


	}

	.down-content-box {
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
	}

	.content-title {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;

	}

	.title-time {
		width: 130rpx;
		padding: 10rpx 10rpx;
		height: 100%;
	}

	.sample-title {
		color: #7e7e7e;
		padding: 10rpx;
		font-size: 22rpx;
	}

	.content-image {
		width: 100%;
		height: 320rpx;
		display: flex;

	}

	.content-image-columns {
		width: 45%;
		height: 100%;
		padding: 0rpx 20rpx;
		border-radius: 20rpx;
	}

	.content-img-col {
		width: 100%;
		height: 100%;

		border-radius: 25rpx;
	}

	.content-image-row {
		width: 45%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-img-two-box {
		width: 100%;
		height: 50%;
		padding: 5rpx 0rpx;
		border-radius: 25rpx;
	}

	.content-img-two {

		width: 100%;
		height: 100%;
		border-radius: 25rpx;
	}
</style>